<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <el-form
      v-show="showSearch"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      label-width="70px"
      label-position="left"
    >
      <el-form-item label="产品名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入产品名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!-- <el-form-item label="板块分类" prop="appModule">
        <el-select v-model="queryParams.appModule" placeholder="请选择板块分类">
          <el-option label="全部" :value="0" />
          <el-option label="首页" :value="1" />
          <el-option label="列表" :value="2" />
        </el-select>
      </el-form-item> -->

      <el-form-item label="上架状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择">
          <el-option label="全部" :value="''" />
          <el-option label="上架" :value="1" />
          <el-option label="下架" :value="2" />
        </el-select>
      </el-form-item>

      <!-- <el-form-item label="是否权益" prop="isBig">
        <el-select v-model="queryParams.isBig" placeholder="请选择">
          <el-option label="非权益" :value="0" />
          <el-option label="大额" :value="1" />
          <el-option label="小额" :value="2" />
        </el-select>
      </el-form-item> -->

      <el-form-item label="创建时间" prop="endTime">
        <div class="r_flex">
          <el-date-picker
            v-model="queryParams.alltime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @change="changtime"
          />
        </div>
      </el-form-item>

      <!-- <el-form-item label="上架时间" prop="name">
        <div class="r_flex">
          <el-date-picker v-model="value1" type="date" placeholder="请选择开始时间" />
          <p class="r_margin_14">-</p>
          <el-date-picker v-model="value2" type="date" placeholder="请选择结束时间" />
        </div>
      </el-form-item> -->
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['business:jisuProduct:add']"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh-left" size="mini" @click="getList"
          >刷新</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
    </el-row>

    <!-- 表格数据 -->
    <el-table
      v-if="refreshTable"
      v-loading="loading"
      stripe
      border
      :data="businessList"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{
        background: $store.state.app.theme.tableBack,
        color: $store.state.app.theme.tableColor,
      }"
      @cell-dblclick="celldblclick"
    >
      <el-table-column label="产品编号" fixed="left" align="center" prop="id" />
      <el-table-column
        label="产品名称"
        fixed="left"
        :show-overflow-tooltip="true"
        width="150px"
        align="center"
        prop="name"
      />
      <el-table-column label="产品logo" align="center">
        <template slot-scope="scope">
          <div style="width: 40px; margin: 0 auto">
            <img :src="scope.row.logo" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="scope">
          <div v-if="scope.row.status == 0">
            <el-tag type="info">下架</el-tag>
          </div>
          <div v-else-if="scope.row.status == 1">
            <el-tag type="success">上架</el-tag>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column
        label="签约价格"
        sortable
        width="100px"
        align="center"
        prop="price"
      />
      <el-table-column label="排序" sortable align="center" prop="sort" />
      <el-table-column label="利率(%)" align="center" prop="rate" />
      <el-table-column
        label="贷款额度(万)"
        width="120px"
        align="center"
        prop="lowLoanAmount"
      >
        <template slot-scope="scope"
          >{{ scope.row.lowLoanAmount }} ~
          {{ scope.row.topLoanAmount }}</template
        >
      </el-table-column>
      <el-table-column
        label="贷款期限(月)"
        width="120px"
        align="center"
        prop="lowLoanTerm"
      >
        <template slot-scope="scope"
          >{{ scope.row.lowLoanTerm }} ~ {{ scope.row.topLoanTerm }}</template
        >
      </el-table-column>
      <el-table-column
        label="每日限量"
        width="100px"
        align="center"
        prop="todayUv"
      />
      <!-- <el-table-column
        label="跳转地址(短链接)"
        :show-overflow-tooltip="true"
        width="150px"
        align="center"
        prop="shortUrl"
      >
        <template slot-scope="scope">
          <div class="r_able_url">{{ scope.row.shortUrl }}</div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="跳转链接"
        :show-overflow-tooltip="true"
        width="150px"
        align="center"
        prop="jumpUrl"
      >
        <template slot-scope="scope">
          <div class="r_able_url">{{ scope.row.jumpUrl }}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="VIP" align="center" prop="isVip">
        <template slot-scope="scope">
          <div v-if="scope.row.isVip == 0"><el-tag type="info">否</el-tag></div>
          <div v-else-if="scope.row.isVip == 1"><el-tag type="success">是</el-tag></div>
          <div v-else>--</div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="大额" align="center" prop="isBig">
        <template slot-scope="scope">
          <div v-if="scope.row.isBig == 0">
            <el-tag type="info">无区分</el-tag>
          </div>
          <div v-else-if="scope.row.isBig == 1">
            <el-tag type="success">大额</el-tag>
          </div>
          <div v-else-if="scope.row.isBig == 2">
            <el-tag type="warning">非大额</el-tag>
          </div>
          <div v-else>--</div>
        </template>
      </el-table-column>
      <el-table-column
        label="APP板块分类"
        width="150px"
        align="center"
        prop="invite"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.appModule == 0">无分类</div>
          <div v-else-if="scope.row.appModule == 1">首页</div>
          <div v-else-if="scope.row.appModule == 2">列表</div>
          <div v-else>--</div>
        </template>
      </el-table-column> -->
      <el-table-column
        label="创建时间"
        sortable
        width="160px"
        align="center"
        prop="createTime"
      />
      <el-table-column
        v-if="
          checkPermi([
            'business:jisuProduct:edit',
            'business:jisuProduct:remove',
          ])
        "
        fixed="right"
        label="操作"
        width="100px;"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            v-hasPermi="['business:jisuProduct:edit']"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button
            v-if="scope.row.parentId != 0"
            v-hasPermi="['business:jisuProduct:remove']"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row :gutter="24" class="mb8" style="margin: 20px 0px">
      <el-col
        :span="24"
        style="display: flex; justify-content: flex-end; padding: 0px"
      >
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          @current-change="handlePageChange"
          @size-change="
            (newSize) => {
              queryParams.pageSize = newSize;
              getList();
            }
          "
        />
      </el-col>
    </el-row>

    <!-- 对话框-修改 -->
    <el-dialog
      :title="
        titleDialog === 'add' ? '新增甲方产品（极速贷）' : '修改极速贷信息'
      "
      :visible.sync="openDialog"
      width="1000px"
      append-to-body
    >
      <el-form
        ref="formDialog"
        style="padding: 0px 50px"
        :model="formDialog"
        :rules="rules"
        label-width="120px"
      >
        <div class="">
          <!-- 隔行 -->
          <div
            class="ruoyi_gehang"
            style="margin-bottom: 20px; margin-left: -20px"
          >
            <i
              class="gehang_h"
              :style="'background: ' + this.$store.state.settings.theme"
            />
            <p>产品信息</p>
          </div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品LOGO" prop="logo">
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :http-request="requestUpload"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageLogoUrl" :src="imageLogoUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="产品名称" prop="name">
                <el-input v-model="formDialog.name" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="跳转地址" prop="jumpUrl">
            <el-input v-model="formDialog.jumpUrl" placeholder="请输入" />
          </el-form-item>

          <el-row>
            <el-col :span="12">
              <el-form-item label="签约价格" prop="price">
                <el-input v-model="formDialog.price" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="月利率" prop="rate">
                <el-input v-model="formDialog.rate" placeholder="请输入月利率">
                  <template slot="append">%</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="最低贷款期限" prop="lowLoanTerm">
                <!-- 只能输入正整数 -->
                <el-input
                  v-model="formDialog.lowLoanTerm"
                  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  placeholder="请输入最低贷款月数"
                >
                  <template slot="append">月</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高贷款期限" prop="topLoanTerm">
                <el-input
                  v-model="formDialog.topLoanTerm"
                  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  placeholder="请输入最高贷款月数"
                >
                  <template slot="append">月</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="最低贷款额度" prop="lowLoanAmount">
                <el-input
                  v-model="formDialog.lowLoanAmount"
                  placeholder="请输入最低贷款额度"
                >
                  <template slot="append">万</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高贷款额度" prop="topLoanAmount">
                <el-input
                  v-model="formDialog.topLoanAmount"
                  placeholder="请输入最低贷款额度"
                >
                  <template slot="append">万</template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="公司主体" prop="company">
                <el-input
                  v-model="formDialog.company"
                  placeholder="请输入公司主体"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资产来源" prop="assetsSource">
                <el-input
                  v-model="formDialog.assetsSource"
                  placeholder="请输入资产来源"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="房产要求" prop="requireHourse">
                <el-input
                  v-model="formDialog.requireHourse"
                  placeholder="请输入房产要求"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工资要求" prop="requireWage">
                <el-input
                  v-model="formDialog.requireWage"
                  placeholder="请输入工资要求"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="工作要求" prop="requireWork">
                <el-input
                  v-model="formDialog.requireWork"
                  placeholder="请输入工作要求"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品客服" prop="waiterMobile">
                <el-input
                  v-model="formDialog.waiterMobile"
                  placeholder="请输入产品客服"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="所需材料" prop="assets">
                <el-input
                  v-model="formDialog.assets"
                  placeholder="多个材料用‘，’隔开，(如：车产，芝麻分600)"
                />
              </el-form-item>
            </el-col>
          </el-row> -->

          <!-- 隔行 -->
          <div
            class="ruoyi_gehang"
            style="margin-bottom: 20px; margin-left: -20px"
          >
            <i
              class="gehang_h"
              :style="'background: ' + this.$store.state.settings.theme"
            />
            <p>展示配置</p>
          </div>

          <el-row>
            <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input
                  v-model="formDialog.sort"
                  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
                  placeholder="请输入排序"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品标签" prop="tag">
                <el-input
                  v-model="formDialog.tag"
                  placeholder="请输入产品标签"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="是否大额" prop="isBig">
                <el-select
                  v-model="formDialog.isBig"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="不区分" :value="0" />
                  <el-option label="大额" :value="1" />
                  <el-option label="非大额" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="APP板块分类" prop="appModule">
                <el-select
                  v-model="formDialog.appModule"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="无分类" :value="0" />
                  <el-option label="首页" :value="1" />
                  <el-option label="列表" :value="2" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <!-- <el-col :span="12">
              <el-form-item label="是否推荐" prop="isRecommend">
                <el-select v-model="formDialog.isRecommend" placeholder="请选择" style="width: 100%">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="是否VIP可见" prop="isVip">
                <el-select v-model="formDialog.isVip" placeholder="请选择" style="width: 100%">
                  <el-option label="是" :value="1" />
                  <el-option label="否" :value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="APP板块分类" prop="appModule">
                <el-select v-model="formDialog.appModule" placeholder="请选择" style="width: 100%">
                  <el-option label="无分类" :value="0" />
                  <el-option label="首页" :value="1" />
                  <el-option label="列表" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->

          <el-row>
            <el-col :span="12">
              <el-form-item label="极速贷类型" prop="signType">
                <el-select
                  v-model="formDialog.signType"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option label="uv" :value="1" />
                  <el-option label="cpa" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品负责人" prop="contact">
                <el-input v-model="formDialog.contact" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- 隔行 -->
          <div
            class="ruoyi_gehang"
            style="margin-bottom: 20px; margin-left: -20px"
          >
            <i
              class="gehang_h"
              :style="'background: ' + this.$store.state.settings.theme"
            />
            <p>投放配置</p>
          </div>

          <el-row>
            <el-col :span="12">
              <el-form-item label="产品状态" prop="status">
                <el-radio-group v-model="formDialog.status">
                  <el-radio :label="1">上架</el-radio>
                  <el-radio :label="0">下架</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <!-- <el-form-item label="结算方式" prop="signType">
                  <el-select v-model="formDialog.signType" placeholder="请选择" style="width: 100%">
                    <el-option label="uv" :value="1" />
                    <el-option label="cpa" :value="2" />
                  </el-select>
                </el-form-item> -->

              <el-form-item label="每日限量" prop="todayUv">
                <el-input
                  v-model="formDialog.todayUv"
                  placeholder="请输入每日限量"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="上架时间" prop="startOpenTime">
                <div class="r_flex">
                  <el-time-picker
                    v-model="alltime"
                    is-range
                    value-format="HH:mm:ss"
                    format="HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="changRange"
                  />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上架星期" prop="openWeek">
                <MyCheckbox
                  ref="MyCheckbox"
                  :active-check="weekArr"
                  :checkbox-data="ArrCheck"
                  @checkboxChange="checkboxChange"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- <el-col :span="12">
            <el-form-item label="是否联登" prop="isUnion">
              <el-radio-group v-model="formDialog.isUnion">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="撞库接口" prop="zkUrl">
              <el-input
                v-model="formDialog.zkUrl"
                placeholder="请输入撞库接口"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="AES秘钥" prop="secretKey">
              <el-input
                v-model="formDialog.secretKey"
                placeholder="请输入AES加密秘钥"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联登接口" prop="loginUrl">
              <el-input
                v-model="formDialog.loginUrl"
                placeholder="请输入联登接口"
              />
            </el-form-item>
          </el-col> -->
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="submitLoad" @click="submitForm"
          >确 定</el-button
        >
        <el-button @click="openDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  jisuProductList,
  deljisuProduct,
  getjisuProduct,
  upjisuProduct,
  addjisuProduct,
} from "@/api/business/system";
import { ossUpload } from "@/api/oss/oss";
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import MyCheckbox from "@/components/MyCheckbox";

export default {
  name: "ProductSell",
  components: { MyCheckbox },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 修改渠道loading
      submitLoad: false,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      businessList: [],
      // 对话框类型
      titleDialog: "add",
      // 是否显示对话框
      openDialog: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 上架时间
      alltime: "",
      // 查询参数
      queryParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 分页大小
        alltime: "",
        startTime: "",
        endTime: "",
        name: "", // 渠道名
        contact: "", // 我方负责人
        status: "", // 上架状态，0下架，1上架
        appModule: "", // 0无分类 1首页 2列表
        isBig: "",
      },
      // logo地址
      imageLogoUrl: "",
      imageLogoName: "",
      // 数据总条数
      totalPage: 0,
      // 表单参数
      value1: "",
      value2: "",
      // 新增、修改参数
      formDialog: {
        appModule: "",
        contact: "",
        contactPhone: "",
        createBy: "",
        createTime: "",
        logo: "",
        // "id": 0,
        isBig: "",
        isRecommend: "",
        isVip: "",
        jumpUrl: "",
        lowLoanAmount: "",
        lowLoanTerm: "",
        name: "",
        params: {},
        price: "",
        rate: "",
        searchValue: "",
        shortUrl: "",
        sort: "",
        status: 1,
        tag: "",
        topLoanAmount: "",
        topLoanTerm: "",
        updateBy: "",
        updateTime: "",
        openWeek: "", // 选中星期
        signType: 1, // 1 uv 2cpa
        startOpenTime: "",
        todayUv: "",
        requireHourse: "",
        requireWage: "",
        waiterMobile: "",
        requireWork: "",
        company: "",
        assets: "",
        assetsSource: "",
        endOpenTime: "",
        isUnion: "",
        zkUrl: "",
        loginUrl: "",
        secretKey: "",
      },
      // 上架星期
      weekArr: [],
      ArrCheck: [
        { name: "星期日", value: 0, active: false },
        { name: "星期一", value: 1, active: false },
        { name: "星期二", value: 2, active: false },
        { name: "星期三", value: 3, active: false },
        { name: "星期四", value: 4, active: false },
        { name: "星期五", value: 5, active: false },
        { name: "星期六", value: 6, active: false },
      ],
      // 新增表单校验
      rules: {
        name: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        jumpUrl: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        // isBig: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        price: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        signType: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        ownerName: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        invitePage: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        tcOpen: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        inviteUrl: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        status: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        h5TemplateId: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        isRecommend: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        lowLoanTerm: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        topLoanTerm: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        lowLoanAmount: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        topLoanAmount: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        sort: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        tag: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        // isVip: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        // appModule: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        openWeek: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        startOpenTime: [
          { required: true, message: "该项不能为空", trigger: "blur" },
        ],
        rate: [{ required: true, message: "该项不能为空", trigger: "blur" }],
        logo: [{ required: true, message: "logo不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    checkPermi,
    // 时间选择
    changtime(newtime) {
      this.queryParams.startTime = newtime ? newtime[0] : "";
      this.queryParams.endTime = newtime ? newtime[1] : "";
    },
    // 时间选择
    changRange(newtime) {
      this.formDialog.startOpenTime = newtime ? newtime[0] : "";
      this.formDialog.endOpenTime = newtime ? newtime[1] : "";
    },
    // 多选-星期
    checkboxChange(data) {
      this.weekArr = [];
      data.map((val) => {
        if (val.active) {
          this.weekArr.push(val.value);
        }
      });
    },
    // 钩子
    requestUpload(param) {},
    // 上传预处理
    beforeAvatarUpload(file) {
      if (file.type.indexOf("image/") === -1) {
        this.$modal.msgError(
          "文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。"
        );
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          this.imageLogoUrl = reader.result;
          this.imageLogoName = file;
        };
        this.uploadImg(file);
      }
    },
    // 上传图片
    uploadImg(file) {
      const formData = new FormData();
      formData.append("file", file);
      ossUpload(formData).then((response) => {
        this.imageLogoUrl = response.data.url;
        this.formDialog.logo = response.data.url;
        this.$modal.msgSuccess("logo上传成功");
      });
      // let dvObj = document.createElement('input');
      // dvObj.type = 'file';
      // dvObj.id = 'inputUpLoad';
      // // 添加input
      // document.body.appendChild(dvObj);
      // // 删除input
      // document.body.removeChild(dvObj)
      // let files = document.getElementById("inputUpLoad").files //获取文件列表
      // files.value = this.imageLogoUrl;
      // let formData = new FormData();
      // formData.append("file", files[0], this.imageLogoName);
      // ossUpload(formData).then(response => {
      //   this.imageLogoUrl = response.data.imgUrl;
      //   this.$modal.msgSuccess("上传成功");
      // });
    },
    // 查询列表
    getList() {
      this.loading = true;
      jisuProductList(this.queryParams)
        .then((response) => {
          this.businessList = response.rows;
          this.totalPage = response.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 修改按钮操作
    handleUpdate(row) {
      this.loading = true;
      const upId = row.id;
      getjisuProduct(upId)
        .then((response) => {
          this.loading = false;
          this.openDialog = true;
          this.titleDialog = "up";
          this.formDialog = response.data;
          this.imageLogoUrl = response.data.logo;
          // 时间
          let newdate = [];
          if (this.formDialog.startOpenTime === null) {
            newdate = "";
          } else {
            newdate.push(this.formDialog.startOpenTime);
            newdate.push(this.formDialog.endOpenTime);
          }
          this.alltime = newdate;
          // 星期
          this.$set(
            this,
            "weekArr",
            this.formDialog.openWeek ? this.formDialog.openWeek.split(",") : []
          );
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 新增按钮操作
    handleAdd() {
      if (this.formDialog.id) {
        this.formDialog = this.$options.data().formDialog;
        this.imageLogoUrl = "";
      }
      this.alltime = ["00:00:00", "23:59:59"];
      this.openDialog = true;
      this.titleDialog = "add";
      this.$set(this, "weekArr", [0, 1, 2, 3, 4, 5, 6]);
    },
    // 搜索按钮操作
    handleQuery() {
      this.getList();
    },
    // 重置按钮操作
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 删除按钮操作
    handleDelete(row) {
      this.$modal
        .confirm('是否确认删除名称为"' + row.name + '"的数据项？')
        .then(function () {
          return deljisuProduct(row.id);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    // 修改按钮操作
    submitForm() {
      this.formDialog.openWeek = this.weekArr.join();
      this.formDialog.startOpenTime = this.alltime ? this.alltime[0] : "";
      this.formDialog.endOpenTime = this.alltime ? this.alltime[1] : "";
      this.$refs["formDialog"].validate((valid) => {
        if (valid) {
          this.submitLoad = true;
          if (this.titleDialog === "add") {
            addjisuProduct(this.formDialog)
              .then(() => {
                this.submitLoad = false;
                this.openDialog = false;
                // 清空填写信息
                this.formDialog = this.$options.data().formDialog;
                this.imageLogoUrl = "";
                this.getList();
                this.$modal.msgSuccess("新增成功");
              })
              .catch(() => {
                this.submitLoad = false;
              });
          } else {
            upjisuProduct(this.formDialog)
              .then(() => {
                this.submitLoad = false;
                this.openDialog = false;
                this.getList();
                this.$modal.msgSuccess("修改成功");
              })
              .catch(() => {
                this.submitLoad = false;
              });
          }
        }
      });
    },
    // 表单重置
    reset() {
      this.form = {
        parentId: "",
        deptName: "",
        pdAmount: "",
        tag: "",
        leader: "",
        type: "",
        url: "",
        zkStatus: "1",
      };
      this.resetForm("form");
    },
    // 分页请求
    handlePageChange(data) {
      this.queryParams.pageNum = data;
      this.getList();
    },
    // 双击复制
    celldblclick(row, column, cell, event) {
      if (!column.property) return;
      if (!row[column.property]) return;
      const oInput = document.createElement("input");
      oInput.value = row[column.property];
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      this.$message.success({
        message: "复制成功",
        showClose: true,
      });
      oInput.remove();
    },
  },
};
</script>
